<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="./layui/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#img").change(function () {
                //alert(1);
                //1.创建FormData对象  专门用于文件上传的对象
                var fd = new FormData();
                //2.得到要上传的文件
                var file = $("#img")[0].files[0];
                //3.将文件放入到formdata中
                fd.append("headImg", file);
                //4.发送文件
                $.ajax({
                    url: "user/upload",
                    type: "post",
                    data: fd,
                    //是否序列化数据,文件本身就是二进制的数据，所以不需要序列化
                    processData: false,
                    //告知服务器将提交的数据当做普通文件处理
                    contentType: false,
                    success: function (res) {
                        console.info(res);
                        $("#headImg").prop("src", res.data);
                    }
                });
            });
        });
    </script>
    <style type="text/css">
        #img {
            position: relative;
            left: -80px;
            opacity: 0; /*设置透明度为0*/
        }
    </style>
</head>
<body>
<div>
    <img alt="" src="" id="headImg"><br>
    <label>修改头像</label>
    <input type="file" name="headImg" id="img">
</div>
</body>
</html>
